<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>二手交易平台 - 商品列表</title>
<!--    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">-->
    <style>
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="index.html">二手交易平台</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="index.html">商品列表</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-4">
    <h2 class="mb-4">商品列表</h2>
    <div id="goods-list" class="row"></div>
</div>

<!--<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>-->
<script>
// 获取商品列表并渲染
fetch('/pljb_war_exploded/goods')
    .then(r => r.json())
    .then(result => {
        if (result.code === 200) {
            const list = document.getElementById('goods-list');
            result.data.forEach(good => {
                const div = document.createElement('div');
                div.className = 'col-md-4 mb-4';
                div.innerHTML = `
                    <div class="card h-100">
                        <img src="${good.imageUrl || 'https://via.placeholder.com/300x200'}" class="card-img-top" alt="${good.name}">
                        <div class="card-body">
                            <h5 class="card-title">${good.name}</h5>
                            <p class="card-text">${good.description}</p>
                            <p class="card-text"><small class="text-muted">价格: ¥${good.price}</small></p>
                            <a href="goods.html?id=${good.id}" class="btn btn-primary">查看详情</a>
                        </div>
                    </div>`;
                list.appendChild(div);
            });
        } else {
            alert('获取商品列表失败：' + result.msg);
        }
    })
    .catch(error => {
        console.error('获取商品列表失败:', error);
        alert('获取商品列表失败，请稍后重试');
    });
</script>
</body>
</html> 